<template>
  <div class="paramsBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-alert
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        show-icon
        effect="dark"
        :closable="false"
      ></el-alert>

      <el-form :model="form">
        <el-form-item label="选择商品分类 :">
          <el-cascader
            :options="options"
            v-model="selectedOptions"
            :props="props"
            @change="selectChange"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>

      <el-tabs type="border-card">
        <el-tab-pane label="动态参数">
          <el-row type="flex">
            <el-col :span="8">
              <el-row type="flex">
                <el-col :span="20">
                  <el-button type="primary" @click="addParams"
                    >添加参数</el-button
                  >
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-table
            :data="tableParams"
            style="width: 100%; margin-bottom: 20px"
            border
          >
            <el-table-column type="expand" class="menu">
              <!-- e-tag 动态编辑标签  编辑参数 -->
              <template slot-scope="scope">
                <el-tag
                  :key="tag"
                  v-for="tag in scope.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              width="50"
              label="#"
            ></el-table-column>

            <el-table-column prop="attr_name" label="参数名称" width="">
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="静态属性">
          <!-- <el-row type="flex">
            <el-col :span="8">
              <el-row type="flex">
                <el-col :span="20">
                  <el-button type="primary" @click="addParams"
                    >添加属性</el-button
                  >
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-table
            :data="tableParams"
            style="width: 100%; margin-bottom: 20px"
            border
          >
            <el-table-column type="expand" class="menu">
              <template slot-scope="scope">
                <el-tag
                  :key="tag"
                  v-for="tag in scope.row.attr_write"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              width="50"
              label="#"
            ></el-table-column>

            <el-table-column prop="attr_name" label="参数名称" width="">
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table> -->
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加动态参数 -->
    <el-dialog title="添加动态参数" :visible.sync="dialogFormVisibleParams">
      <el-form :model="formParams">
        <el-form-item label="动态参数" :label-width="formLabelWidth">
          <el-input v-model="formParams.params" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleParams = false">取 消</el-button>
        <el-button type="primary" @click="confirmParamsSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改参数 -->
    <el-dialog title="修改动态参数" :visible.sync="dialogEditParams">
      <el-form :model="formEditParams">
        <el-form-item label="动态参数" :label-width="formLabelWidth">
          <el-input
            v-model="formEditParams.attr_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditParams = false">取 消</el-button>
        <el-button type="primary" @click="confirmEditParams">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>



// data: Array(3)
// 0:
// attr_id: 3809
// attr_name: "颜色"
// attr_sel: "many"
// attr_vals: ""
// attr_write: "list"
// cat_id: 6
// delete_time: null

// 1: {attr_id: 3819, attr_name: '版式', cat_id: 6, attr_sel: 'many', attr_write: 'list', …}
// 2: {attr_id: 3825, attr_name: '尺寸', cat_id: 6, attr_sel: 'many', attr_write: 'list', …}

// meta: {msg: '获取成功', status: 200}

<script>
import {
  getCategories,
  getParams,
  getAddParams,
  getDeleteParams,
  getEditParams,
  getSearchParams,
} from "../../api/index";
export default {
  data() {
    return {
      form: {},
      options: [],
      props: {
        value: "cat_id",
        label: "cat_name",
      },
      selectedOptions: [],
      tableParams: [],
      // 动态编辑e-tag
      inputVisible: false,
      inputValue: "",
      dynamicTags: ["标签一", "标签二", "标签三"],

      formParams: {
        params: "",
      },
      dialogFormVisibleParams: false,
      dialogEditParams: false,
      formLabelWidth: "120px",

      formEditParams: {},
    };
  },
  created() {
    this.handlerSelect();
  },
  methods: {
    // 级联选择功能
    async handlerSelect() {
      let res = await getCategories({ type: "3" });
      let {
        data,
        meta: { status, msg },
      } = res;
      if (status != 200) return this.$message.error(msg);
      this.options = data;
    },
    async selectChange() {
      let len = this.selectedOptions.length;
      let params = {
        id: this.selectedOptions[len - 1],
        sel: "many",
      };
      let res = await getParams(params);
      console.log(res);
      let {
        data,
        meta: { msg, status },
      } = res;
      if (status != 200) return this.$message.error(msg);
      this.tableParams = data;
    },

    async handleEdit(row) {
      this.dialogEditParams = true;
      // console.log(row)
      let res = await getSearchParams(row);
      this.formEditParams = res.data;
    },
    // 确认修改参数
    async confirmEditParams() {
      let {
        data,
        meta: { msg, status },
      } = await getEditParams(this.formEditParams);
      if (status != 200) return this.$message.error(msg);
      this.$message.success("参数修改成功");
    },

    // 添加参数
    addParams() {
      this.dialogFormVisibleParams = true;
    },
    async confirmParamsSubmit() {
      let len = this.selectedOptions.length;
      let params = {
        id: this.selectedOptions[len - 1],
        attr_name: this.formParams.params,
        attr_sel: "many",
        attr_vals: "",
      };
      let res = await getAddParams(params);
      // console.log(res)
      let {
        data,
        meta: { msg, status },
      } = res;
      if (status != 201) return this.$message.error(msg);
      this.tableParams.push(data);
      this.dialogFormVisibleParams = false;
      this.$message.success("参数添加成功");
    },
    // 删除参数
    async handleDelete(row) {
      // attr_id cat_id
      try {
        let res = await this.$confirm("是否删除该参数？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        // console.log(res)
        if (res == "confirm") {
          let res = await getDeleteParams({
            id: row.cat_id,
            attrid: row.attr_id,
          });
          console.log(res);
          let {
            meta: { msg, status },
          } = res;
          if (status == 200) {
            this.$message.success(msg);
          } else {
            this.$message.warning(msg);
          }
        }
      } catch {
        this.$message.info("取消删除");
      }
    },
    //动态编辑 e-tag
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    async handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  margin: 20px 0;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>